<template>
  <div class="login">
    <div class="login-content">
      <img src="../../assets/images/login_left.png" alt="" srcset="" style="height: 100%;" class="login-left">
      <div class="login-form">
        <div style="width: 100%;">
          <div style="color: #333333; font-size: 40px; padding-bottom: 40px; border-bottom: 1px solid #F5F5F5; letter-spacing: 2px;">
            欢迎登录！
            <p v-if="isNeedResgiter == 'True'" class="system-title">湖北省水利事业发展中心专家库管理系统</p>
          </div>
          <div class="tabs-labels">
            <span @click="changeTab('loginByName')" :class="{'active': activeName == 'loginByName'}" :style="isNeedResgiter != 'False' ? 'border-bottom: none;' : ''">账号登录</span>
          </div>

          <div v-if="activeName == 'loginByName'">
            <el-form
              ref="loginFormRef"
              :model="loginForm"
              :rules="rules"
              class="demo-ruleForm"
              status-icon
            >
              <el-form-item prop="LoginName">
                <el-input v-model="loginForm.LoginName" placeholder="请输入账号" :prefix-icon="User"></el-input>
              </el-form-item>

              <el-form-item prop="PassWord">
                <el-input v-model="loginForm.PassWord" placeholder="请输入密码" :prefix-icon="Lock" show-password @keyup.enter="loginDo"></el-input>
              </el-form-item>
            </el-form>

            <div style="text-align: left; color:#999999;" v-if="isNeedResgiter == 'False'">
              <span>已有账号</span>
              <span style="color: #7377D2; cursor: pointer;" @click="changeTab('loginByCode')">扫码登录</span>
            </div>

            <div style="text-align: left; color:#999999;" v-else>
              <span>没有账号？</span>
              <span style="color: #7377D2; cursor: pointer;" @click="goResgiter">去注册</span>
              <p style="font-weight: 400; font-size: 18px; margin-top: 10px;">
                <el-icon style="vertical-align: middle;">
                  <PhoneFilled />
                </el-icon>
                <span>服务热线：</span>
                <span style="color: rgb(115, 119, 210);">027-87265789</span>
              </p>
            </div>

            <el-button type="primary" round @click="loginDo" :loading="buttonLoading">登录</el-button>
          </div>
          <div v-else class="hbzw-images">
            <img src="../../assets/images/hbzw.png" alt="">
          </div>
        </div>
        <img src="../../assets/images/login_right.png" alt="" style="width: 80px; position: absolute; right: 0; bottom: 85px;">
      </div>
    </div>
  </div>
</template>

<script>
export default { name: 'login' }
</script>
<script setup>
import { ref, reactive, onMounted, watch } from 'vue';
import { User, Lock, PhoneFilled } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { http } from '@/utils/http/index';
import { useAuthStore } from '@/stores/modules/auth.js'

/* 路由 */
const router = useRouter()

const authStore = useAuthStore()

/* 当前环境是否需要注册账号页面 */
const isNeedResgiter = ref(null)

/* 查询当前环境是否需要注册 */
const getIsNeedResgiter = () => {
  http.$GET("/Home/IsRegister").then(res => {
    isNeedResgiter.value = res.result.content.isRegister
  })
}

getIsNeedResgiter()

/* 所选登录方式 */
const activeName = ref("loginByName")

/* 切换登录方式 */
const changeTab = (name) => {
  activeName.value = name
}

/* 登录表单 */
const loginForm = ref({
  LoginName: "",
  PassWord: "",
})

const loginFormRef = ref(null)

/* 校验规则 */
const rules = ref({
  LoginName: [
    { required: true, message: '请填写用户名', trigger: 'blur' }
  ],
  PassWord: [
    { required: true, message: '请填写密码', trigger: 'blur' }
  ],
})

const buttonLoading = ref(false)

/* 登录 */
const loginDo = () => {
  loginFormRef.value.validate((valid, fields) => {
    if(valid) {
      /**清除之前的记录 */
      authStore.cleanAuthInfo()

      buttonLoading.value = true

      let params = JSON.parse(JSON.stringify(loginForm.value))
      params.ReturnUrl = router.currentRoute.value.query.RedirectUri ? router.currentRoute.value.query.RedirectUri : '/'

      const formData = new FormData()
      for(let k in params) {
        formData.append(k ,params[k])
      }

      http.$POST("/Home/LoginDo", formData).then(res => {
        buttonLoading.value = false
        if(res.isError) return ElMessage.warning(res.message)

        /* 设置用户信息 */
        authStore.getUserInfo(res.result)
        
        http.$GET("/RoleAction/GetActionTreeByApplicationIdAndUserId", { appId: '1759745808535691264', uid: res.result.id }).then(_res => {

          /* 设置权限 */
          authStore.getUserPermission(_res.result.content)

          if(router.currentRoute.value.query.AppId) {
            router.push({
              path: '/Home/empower',
              query: router.currentRoute.value.query
            })
          } else {
            if(router.currentRoute.value.query.RedirectUri) {
              window.open(router.currentRoute.value.query.RedirectUri, "_self")
            } else {
              router.push("/", "_self")
            }
          }
        })
      })
    } else {
      ElMessage.warning("请先完成必填项")
    }
  })
}

/* 去注册 */
const goResgiter = () => {
  router.push({
    path: '/Home/resgiter',
    query: router.currentRoute.value.query ? router.currentRoute.value.query : {}
  })
}

</script>

<style lang='scss' scoped>
.login {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: url("../../assets/images/login_bg.png");
  background-size: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .system-title {
    font-size: 24px;
    margin-top: 20px;
  }

  .login-content {
    max-width: 1128px;
    background: #ffffff;
    height: 720px;
    border-radius: 31px;
    display: flex;
    position: relative;
  }

  .login-form {
    display: flex;
    justify-content: center;
    width: 668px;
    height: 100%;
    text-align: center;
    overflow: auto;
    background: #fff;
    border-radius: 15px;
    padding: 78px 90px 71px 104px;
  }

  .tabs-labels {
    margin: 20px 0;
    span {
      display: inline-block;
      width: 50%;
      color: #999999;
      font-size: 20px;
      cursor: pointer;
      padding-bottom: 10px;
    }

    .active {
      border-bottom: 3px solid #7478D3;
    }
    
  }

  .hbzw-images{
    img {
      margin: 20px;
      outline-offset: 20px;
      outline: 1px solid #cccccc;
    }
    
  }

  :deep(.el-input) {
    height: 48px;
    line-height: 48px;
    font-size: 18px;
  }

  :deep(.el-input__wrapper) {
    background-color: #F5F5F5;
    border-radius: 40px;
    box-shadow: none;
    padding-left: 40px;
  }

  :deep(.el-input__wrapper.is-focus, .el-input__wrapper:hover) {
    box-shadow: none;
  }

  :deep(.el-form-item__error){
    left: 20px;
  }

  :deep(.el-button) {
    width: 100%;
    height: 48px;
    line-height: 48px;
    color: #FFFFFF;
    background: #7377D2;
    border-color: #7377D2;
    font-size: 22px;
    margin-top: 92px;
  }
}

@media screen and (max-width : 1000px) {
  .login-form {
    width: 100% !important;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 15px !important;
  }
  .login-left{
    border-radius: 15px !important;
  }
}
</style>